<template>
  <div id="goodsall" class="goodsall">
    <el-row>
      <el-col :span="24">
        <div class="portlets tl">
          <el-button type="primary">发布商品</el-button>
          <div class="fr">
            <span class="">商品分类：</span>
            <el-select v-model="value" placeholder="选择全部">
              <el-option
                v-for="item in goodsType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="panel">
          <div class="panel-content">
            <table cellpadding="0" cellspacing="0" class="table-common-main-lang">
              <thead>
                <tr>
                  <th v-for="item in tableData.tHead">
                    <strong>{{ item }}</strong>
                  </th>  
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in tableData.tDataList">
                  <td>{{ item.id }}</td>
                  <td>
                    <div class="productInfo">
                      <img :src="contactUrl(item.imageHost,item.mainImage)" class="thumbIndex">
                      <p class="title"><b>标题：</b>{{ item.name }}</p>
                    </div>
                  </td>
                  <td>{{ item.price }}</td>
                  <td>{{ item.status}}</td>
                  <td>{{ item.createtime }}</td>
                  <td><router-link :to="{ name: 'goodsdetail', params: { id: item.id }}" class="opr modify">修改</router-link><span class="opr delete" @click="setStatus(index,item.id,item.status)">下架</span></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import axios from 'axios'
  export default{
    name: 'newsForm',
    data () {
      return {
        tableData: {
          tHead: [
            'id',
            '商品信息',
            '售价',
            '上下架',
            '创建时间',
            '操作'
          ],
          tDataList: ''
        },
        value: '',
        goodsType: [
          {
            value: 0,
            label: '选择全部'
          },
          {
            value: 1,
            label: '分类一'
          },
          {
            value: 2,
            label: '分类二'
          }
        ],
        goodlist: {
          pageNum: 1,
          pageSize: 10
        }
      }
    },
    components: {
    },
    created () {
      axios({
          url: 'http://47.90.38.178:8080/wx_shop_test/manage/product/list.do',
          method: 'POST',
          params: this.goodlist
        }).then(obj => {
          console.log(obj)
          if (obj.data.status === 0) {
            console.log('x')
            this.tableData.tDataList = obj.data.data.list
            console.log(obj.data.list)
          }
        })
    },
    methods: {
      contactUrl (host, str) {
        return host + str
      },
      setStatus (index, id, status) {
        axios({
          url: 'http://47.90.38.178:8080/wx_shop_test//manage/product/set_sale_status.do',
          method: 'POST',
          params: {
            productId: id,
            status: Number(!status)
          }
        }).then(obj => {
          if (obj.data.status === 0) {
            this.tableData.tDataList[index].status = Number(!status)
          }
        })
      },
      openDetail (id) {
        this.$router.push('/goodsdetail/' + id)
      }
    }
  }
</script>
<style>
  .dashboard .el-row{
    margin-bottom: 30px;
  }
  .portlets{
    margin-bottom: 10px;
  }
  .thumbIndex{
    width: 80px;
    height: 80px;
    float: left;
  }
  .goodsall .productInfo{
    margin: 0 10px;
  }
  .goodsall .title{ 
    margin-left: 90px;
    text-align: left;
    max-width: 240px; 
  }
  .opr{
    padding: 0 8px;
  }
  .modify{

  }
</style>
